<template>
    <div>
        <el-dialog v-model="centerDialogVisible" :title=title width="500" align-center>
            <el-form v-if="title=='添加'" ref="ruleFormRefAdd" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
                <el-form-item label="广告标题" prop="title">
                    <el-input placeholder="请输入广告标题" v-model="ruleForm.title" />
                </el-form-item>
                <el-form-item label="广告类型" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="请选择广告类型">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload action="#" list-type="picture-card" :auto-upload="false">
                        <el-icon>
                            <Plus />
                        </el-icon>

                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <el-icon><zoom-in /></el-icon>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleDownload(file)">
                                        <el-icon>
                                            <Download />
                                        </el-icon>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleRemove(file)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input-number v-model="ruleForm.sort" :min="1" :max="10" controls-position="right" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRefAdd)">
                        立即添加
                    </el-button>
                    <el-button @click="resetForm(ruleFormRefAdd)">取消</el-button>
                </el-form-item>
            </el-form>
            <el-form v-else ref="ruleFormRefEdit" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
                <el-form-item label="广告标题" prop="title">
                    <el-input placeholder="请输入广告标题" v-model="ruleForm.title" />
                </el-form-item>
                <el-form-item label="广告类型" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="请选择广告类型">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
                <el-form-item label="图片">
                    <el-upload action="#" list-type="picture-card" :auto-upload="false">
                        <el-icon>
                            <Plus />
                        </el-icon>

                        <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <el-icon><zoom-in /></el-icon>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleDownload(file)">
                                        <el-icon>
                                            <Download />
                                        </el-icon>
                                    </span>
                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleRemove(file)">
                                        <el-icon>
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </span>
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input-number v-model="ruleForm.sort" :min="1" :max="10" controls-position="right" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRefEdit)">
                        立即添加
                    </el-button>
                    <el-button @click="resetForm(ruleFormRefEdit)">取消</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
const title = ref()
const centerDialogVisible = ref(false)
const ruleFormRefEdit = ref(null)
const ruleFormRefAdd = ref(null)

const showdialog = (row) => {

    if (row) {
        title.value = "编辑"
        Object.assign(ruleForm, row)

    } else {
        title.value = "添加"

        ruleForm = reactive({
            title: '',
            region: "",
            sort: 1
        })

    }

    centerDialogVisible.value = true
    if (!centerDialogVisible.value) {
        ruleFormRef = ref(null)
    }
}

defineExpose({ showdialog })


let ruleForm = reactive({
    title: '',
    region: "",
    sort: 1
})



const rules = reactive({
    title: [
        { required: true, message: '广告标题不能为空', trigger: 'blur' },
    ],
    region: [
        { required: true, message: '请选择广告类型', trigger: 'blur' },
    ],

})

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            centerDialogVisible.value = false
        } else {
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
    centerDialogVisible.value = false
}

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)

const handleRemove = (file) => {
    console.log(file)
}

const handlePictureCardPreview = (file) => {
    dialogImageUrl.value = file.url
    dialogVisible.value = true
}

const handleDownload = (file) => {
    console.log(file)
}


</script>

<style lang="scss" scoped></style>